<template>
  <a-spin tip="加载中..." :spinning="spinning">
    <a-page-header
      :title="isView ? '费用报销预览' : '费用报销审批'"
      @back="emit('close')"
      style="background-color: #fff; border-radius: 10px; height: 100%"
    >
      <a-card
        style="height: 100%; border-radius: 10px; padding: none; overflow-x;: auto"
        :bodyStyle="{ padding: '0px' }"
        :bordered="false"
      >
        <!-- 步骤条 -->
        <a-steps @change="changeStatus" :current="current">
          <a-step title="待审核"></a-step>
          <a-step title="待分工会主席审核">
            <template #icon v-if="audit === 1">
              <loading-outlined />
            </template>
          </a-step>
          <a-step title="待财务审核">
            <template #icon v-if="audit === 2">
              <loading-outlined />
            </template>
          </a-step>
          <a-step title="待工会主席审核">
            <template #icon v-if="audit === 3">
              <loading-outlined />
            </template>
          </a-step>
          <a-step title="审核完毕"> </a-step>
        </a-steps>
        <!-- 审核表单 -->
        <a-card :bordered="false" v-if="audit === current && current !== 4">
          <template #title>
            <div style="width: 100%; text-align: center">审核信息</div>
          </template>
          <a-row>
            <a-col :span="12">
              <a-form-item
                label="审核人"
                :label-col="{ style: { width: '100px' } }"
              >
                <a-input v-model:value="formState.name" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="审核时间"
                :label-col="{ style: { width: '100px' } }"
              >
                <a-input v-model:value="formState.time" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="margin-top: 20px">
            <a-col :span="24">
              <a-form-item
                label="审核意见"
                :label-col="{ style: { width: '100px' } }"
              >
                <a-input v-model:value="formState.name" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item style="margin-top: 20px">
            <div
              style="width: 100%; display: flex; justify-content: space-around"
            >
              <a-button style="width: 37%">拒绝</a-button>
              <a-button type="primary" style="width: 37%" html-type="submit"
                >提交</a-button
              >
            </div>
          </a-form-item>
        </a-card>
        <!-- 待审核信息 || 已审核页面基础信息 -->
        <a-descriptions
          bordered
          v-if="current === 0 || current === 4"
          style="margin-top: 20px"
          :labelStyle="{ width: '150px', textAlign: 'center' }"
          :contentStyle="{ width: '20%', textAlign: 'center' }"
        >
          <a-descriptions-item label="专项经费名称"
            >扩大科研项目经费</a-descriptions-item
          >
          <a-descriptions-item label="申请单位"
            >经济管理学院工会</a-descriptions-item
          >
          <a-descriptions-item label="当前节点申请状态">
            <a-badge status="processing" text="待审核" v-if="current === 0" />
            <a-badge status="success" text="审核完毕" v-else />
          </a-descriptions-item>
          <a-descriptions-item label="专项经费类型">
            <a-tag color="blue">工会专项经费</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="专项经费金额">
            <a-tag color="orange">888888</a-tag>
          </a-descriptions-item>
          <a-descriptions-item></a-descriptions-item>
          <a-descriptions-item label="申请人">是呆龙没错了</a-descriptions-item>
          <a-descriptions-item label="申请人电话"
            >17589520000</a-descriptions-item
          >
          <a-descriptions-item label="申请时间">2023-11-16</a-descriptions-item>
          <a-descriptions-item label="申请理由" :span="3">
            没钱了
          </a-descriptions-item>
        </a-descriptions>
        <!-- 财务审核信息 -->
        <a-badge-ribbon text="财务审核" v-if="current === 4">
          <a-descriptions
            bordered
            v-if="current === 4"
            style="margin-top: 20px"
            :labelStyle="{ width: '150px', textAlign: 'center' }"
            :contentStyle="{ width: '20%', textAlign: 'center' }"
          >
            <a-descriptions-item label="审核节点">财务审核</a-descriptions-item>
            <a-descriptions-item label="审核人"
              >是呆龙没错了</a-descriptions-item
            >
            <a-descriptions-item label="审核时间"
              >2023-11-18</a-descriptions-item
            >
            <a-descriptions-item label="审核理由" :span="3"
              >无理由</a-descriptions-item
            >
            <a-descriptions-item label="签字" :span="3"
              >呆龙</a-descriptions-item
            >
          </a-descriptions>
        </a-badge-ribbon>
        <!-- 工会主席审核信息 -->
        <a-badge-ribbon text="工会主席审核" v-if="current === 4">
          <a-descriptions
            bordered
            v-if="current === 4"
            style="margin-top: 20px"
            :labelStyle="{ width: '150px', textAlign: 'center' }"
            :contentStyle="{ width: '20%', textAlign: 'center' }"
          >
            <a-descriptions-item label="审核节点"
              >工会主席审核</a-descriptions-item
            >
            <a-descriptions-item label="审核人"
              >是呆龙没错了</a-descriptions-item
            >
            <a-descriptions-item label="审核时间"
              >2023-11-18</a-descriptions-item
            >
            <a-descriptions-item label="审核理由" :span="3"
              >无理由</a-descriptions-item
            >
            <a-descriptions-item label="签字" :span="3"
              >呆龙</a-descriptions-item
            >
          </a-descriptions>
        </a-badge-ribbon>
        <!-- 已审核页面----分工会主席审核完毕-->
        <a-descriptions
          bordered
          v-if="current === 1 && audit > 1"
          style="margin-top: 20px"
          :labelStyle="{ width: '150px', textAlign: 'center' }"
          :contentStyle="{ width: '20%', textAlign: 'center' }"
        >
          <a-descriptions-item label="审核人">是呆龙没错了</a-descriptions-item>
          <a-descriptions-item label="审核时间">2023-11-16</a-descriptions-item>
          <a-descriptions-item label="当前节点申请状态">
            <a-badge status="processing" text="财务审核" />
          </a-descriptions-item>
          <a-descriptions-item label="审核意见" :span="3">
            无意见
          </a-descriptions-item>
          <a-descriptions-item label="签字" :span="3">
            陈德龙
          </a-descriptions-item>
        </a-descriptions>
        <!-- 已审核页面----财务审核完毕 -->
        <a-descriptions
          bordered
          v-if="current === 2 && audit > 2"
          style="margin-top: 20px"
          :labelStyle="{ width: '150px', textAlign: 'center' }"
          :contentStyle="{ width: '20%', textAlign: 'center' }"
        >
          <a-descriptions-item label="审核人">是呆龙没错了</a-descriptions-item>
          <a-descriptions-item label="审核时间">2023-11-16</a-descriptions-item>
          <a-descriptions-item label="当前节点申请状态">
            <a-badge status="processing" text="财务审核" />
          </a-descriptions-item>
          <a-descriptions-item label="审核意见" :span="3">
            无意见
          </a-descriptions-item>
          <a-descriptions-item label="签字" :span="3">
            陈德龙
          </a-descriptions-item>
        </a-descriptions>
        <!-- 已审核页面----工会主席审核完毕 -->
        <a-descriptions
          bordered
          v-if="current === 3 && audit > 3"
          style="margin-top: 20px"
          :labelStyle="{ width: '150px', textAlign: 'center' }"
          :contentStyle="{ width: '20%', textAlign: 'center' }"
        >
          <a-descriptions-item label="审核人">是呆龙没错了</a-descriptions-item>
          <a-descriptions-item label="审核时间">2023-11-16</a-descriptions-item>
          <a-descriptions-item label="当前节点申请状态">
            <a-badge status="processing" text="工会主席审核" />
          </a-descriptions-item>
          <a-descriptions-item label="审核意见" :span="3">
            无意见
          </a-descriptions-item>
          <a-descriptions-item label="签字" :span="3">
            陈德龙
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </a-page-header>
  </a-spin>
</template>

<script setup lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { reactive, ref, onMounted } from "vue";
import { message } from "ant-design-vue";
const emit = defineEmits<{
  (event: "close"): void;
}>();
const props = defineProps<{
  isView?: boolean;
  auditId: string;
}>();
onMounted(() => {
  spinning.value = true;

  audit.value = 2;
  current.value = 2;
  props.isView && current.value--;
  setTimeout(() => {
    spinning.value = false;
    const randomNum = Math.random();
    const result = randomNum < 0.5 ? 0 : 1;
    if (result) {
      message.success("个人申请");
      isPersonage.value = true;
    } else {
      audit.value++;
      current.value++;
      message.success("分工会发起申请");
    }
  }, 2000);
});
const isPersonage = ref(false);
const spinning = ref(false);
const audit = ref(0);
const current = ref(0);
const formState = reactive({
  name: "",
  time: "",
});

const changeStatus = (val: any) => {
  let auditStatus = audit.value;
  
  if (!isPersonage.value && val === 1) {
    message.warning("此申请已跳过分工会审核");
    return;
  }
  if (props.isView) {
    auditStatus--;
  }
  if (val > auditStatus) {
    message.warning("暂时未审核到此流程");
    return;
  }
  current.value = val;
};
</script>

<style scoped></style>
